<template>
  <div class="nav_box">
    <router-link :to="{ name: 'en_home' }" class="logo" v-if="hiddenLogin">
    </router-link>
    <transition name="navlist">
      <div class="nav_list_box" v-if="hiddenNavList">
        <img
          class="nav_logo"
          @click="onNavlink('en_home')"
          src="@/assets/images/mobile_nav_logo.png"
          alt
        />
        <div class="nav_list" @click="navlist">
          <div class="nav_title home">
            <div
              class="title"
              @click="onNavlink('en_home')"
              :to="{ name: 'en_home' }"
            >
              <div>HOME</div>
              <!-- <div>首页</div> -->
              <!-- <div class="arrows"></div> -->
            </div>
          </div>
          <div class="nav_title">
            <div
              class="title"
              @click="onNavlink('en_aboutUs',{titleText:'OVERVIEW'})"
              :to="{ name: 'en_aboutUs' }"
            >
              <img src="@/assets/images/nav_icon_01.png" alt />
              <div>ABOUT US</div>
              <!-- <div>有关协力</div> -->
              <!-- <div class="arrows"></div> -->
            </div>
            <div class="nav_series_bg"></div>
            <div v-if="hiddenNavList" class="nav_series">
              <div
                @click="onNavlink('en_overview',{titleText:'OVERVIEW'})"
                :to="{ name: 'en_overview' }"
                class="nav_item"
              >
                OVERVIEW
              </div>
              <!-- 协力概览 -->
              <div
                @click="onNavlink('en_honor',{titleText:'HONOR'})"
                :to="{ name: 'en_honor' }"
                class="nav_item"
              >
                HONOR
              </div>
              <!-- 协力荣誉 -->
              <div
                @click="onNavlink('en_duty',{titleText:'RESPONSIBILITY'})"
                :to="{ name: 'en_duty' }"
                class="nav_item"
              >
                RESPONSIBILITY
              </div>
              <!-- 社会责任 -->
              <!-- <div
                @click="onNavlink('en_lectureHall')"
                :to="{ name: 'en_lectureHall' }"
                class="nav_item"
              >
                协力大讲堂
              </div> -->
            </div>
          </div>
          <div class="nav_title nav_active">
            <div class="title" @click="onNavlink('en_activity')">
              <img src="@/assets/images/nav_icon_02.png" alt />
              <div>ACTIVITY</div>
              <!-- <div>活动专栏</div> -->
              <!-- <div class="arrows"></div> -->
            </div>
          </div>
          <div class="nav_title">
            <div
              class="title"
              @click="onNavlink('en_field', { cid: serviceCate[0].id })"
              :to="{ name: 'en_field', query: { cid: serviceCate[0].id } }"
            >
              <img src="@/assets/images/nav_icon_03.png" alt />
              <div>FIELD</div>
               <!-- <div>专业领域</div> -->
              <!-- <div class="arrows"></div> -->
            </div>
            <div class="nav_series_bg"></div>
            <ul v-if="hiddenNavList" class="nav_series">
              <div
                v-for="(item, index) in serviceCate"
                :key="index"
                @click="onNavlink('en_field', { cid: item.id })"
                :to="{ name: 'en_field', query: { cid: item.id } }"
                class="nav_item_field nav_item"
              >
                {{ item.title }}
              </div>
            </ul>
          </div>
          <div class="nav_title">
            <div
              class="title"
              @click="onNavlink('en_personnel')"
              :to="{ name: 'en_personnel' }"
            >
              <img src="@/assets/images/nav_icon_04.png" alt />
              <div>PROFESSIONALS</div>
              <!-- <div>专业人员</div> -->
              <!-- <div class="arrows"></div> -->
            </div>
          </div>

          <div class="nav_title">
            <div
              class="title"
              @click="onNavlink('en_professional', { id: news_cate[0].id })"
              :to="{ name: 'en_news' }"
            >
              <img src="@/assets/images/nav_icon_05.png" alt />
               <div>NEWS</div>
              <!-- <div class="arrows"></div> -->
            </div>
            <div class="nav_series_bg"></div>
            <ul v-if="hiddenNavList" class="nav_series">
              <div
                v-for="(item, index) in news_cate"
                :key="index"
                @click="onNavlink('en_professional', { id: item.id })"
                class="nav_item"
              >
                {{ item.title }}
              </div>

              <!-- <div @click="onNavlink('en_companyNews',{currentIndex:1})" class="nav_item">协力新闻</div> -->

              <!-- <div
                @click="onNavlink('en_problem', { id: '00' })"
                class="nav_item"
                :to="{ name: 'en_problem' }"
              >
                问题解答
              </div> -->
            </ul>
          </div>
          <!-- <div class="nav_title">
            <div
              class="title"
              @click="onNavlink('en_party_mass')"
              :to="{ name: 'en_party_mass' }"
            >
              <img src="@/assets/images/nav_icon_06.png" alt />
              <div>党群建设</div>
            </div>
          </div> -->

          <!-- <div class="nav_title">
            <div
              class="title"
              @click="onNavlink('en_recruitment')"
              :to="{ name: 'en_recruitment' }"
            >
              <img src="@/assets/images/nav_icon_07.png" alt />
              <div>人才招聘</div>
            </div>
            <div class="nav_series_bg"></div>
            <ul class="nav_series" v-if="hiddenNavList">
              <div
                @click="onNavlink('en_social')"
                :to="{ name: 'en_social' }"
                class="nav_item"
              >
                社会招聘
              </div>
              <div
                @click="onNavlink('en_campus')"
                :to="{ name: 'en_campus' }"
                class="nav_item"
              >
                校园招聘
              </div>
              <div
                @click="onNavlink('en_life')"
                :to="{ name: 'en_life' }"
                class="nav_item"
              >
                协力生活
              </div>
            </ul>
          </div> -->

          <div class="nav_title">
            <div
              class="title"
              @click="onNavlink('en_contactUs')"
              :to="{ name: 'en_contactUs' }"
            >
              <img src="@/assets/images/nav_icon_08.png" alt />
               <div>GLOBAL NETWORK</div>
              <!-- <div>联系我们</div> -->
            </div>
          </div>
        </div>
      </div>
    </transition>

    <transition name="search">
      <div class="search_box" v-if="hiddenSearch">
        <div class="searchDelete" @click="onSearch"></div>
        <div :class="[ifSearchFocus ? 'search_line2' : 'search_line1']">
          <div class="selectCate">
            <el-select
              v-model="searchCateValue"
              placeholder="please choose"
              popper-class="searchSelectClass"
              @change="searchChange"
            >
              <el-option
                v-for="item in searchOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <input
            type="text"
            v-model="searchInput"
            placeholder="please enter"
            @keyup.enter="searchFn"
             @focus="searchFocus"
              @blur="searchBlur"
          />
        </div>
        <div class="search_btn" @click="searchFn"></div>
      </div>
    </transition>

    <div class="lang" v-if="hiddenLogin">
      <!-- 搜索按钮 -->
      <div class="search_icon" v-if="!hiddenSearch" @click="onSearch"></div>
      <!-- 语言切换按钮 -->
      <div class="lang_icon"></div>
      <el-cascader
        v-model="value"
        :options="options"
        :props="{ expandTrigger: 'hover' }"
        @change="handleChange"
        placeholder="EN"
        slot="EN"
        popper-class="lang_select"
      ></el-cascader>
    </div>

    <div class="btns" v-if="hiddenLogin">
      <!-- <div class="search"></div> -->
      <div class="search_icon" @click="onSearch"></div>
      <div class="btn" @click="onNavBtn"></div>
    </div>
  </div>
</template>
<script>
import { service_cate } from "@/api/field.js";
import { news_article_cate } from "@/api/news.js";
export default {
  data() {
    return {
      value: "", //语言类型选择
      options: [
        {
          value: "CHS",
          label: "中文"
        },
        {
          value: "EN",
          label: "EN"
        },
        {
          value: "JAP",
          label: "JAP"
        }
      ],
      searchOptions: [
        {
          value: "1",
          label: "Professionals"
        },
        {
          value: "2",
          label: "professional field"
        },
        {
          value: "3",
          label: "news"
        }
      ],

      searchCateValue: "1", // 搜索分类选中值
      serviceCate: [{ id: null }], //专业领域分类
      news_cate: [],

      deviceType: false, // true:PC /  falss:h5
      hiddenSearch: false, // 搜索导航栏是否显示   true：显示 / false:隐藏

      searchInput: "", //搜索内容
      ifSearchFocus: false
    };
  },
  computed: {
    hiddenLogin: function() {
      if (this.deviceType) {
        return true;
      } else {
        if (this.hiddenSearch) {
          return false;
        } else {
          return true;
        }
      }
    },
    hiddenNavList: function() {
      if (this.deviceType) {
        if (this.hiddenSearch) {
          return false;
        } else {
          return true;
        }
      } else {
        return false;
      }
    }
  },
  watch: {
    "$store.state.headTitle.clientW": {
      deep: true,
      handler: function(newValue, oldValue) {
        // 设置一个定时器 避免多次触发
        clearTimeout(this.Timeout);
        if (newValue < 1200 && newValue > 640) {
          if (oldValue > 1200) {
            this.Timeout = setTimeout(() => {
              this.deviceType = false;
            }, 200);
          }
        } else if (newValue < 640) {
          this.Timeout = setTimeout(() => {
            this.deviceType = false;
          }, 200);
        } else {
          this.Timeout = setTimeout(() => {
            this.deviceType = true;
          }, 200);
        }
      }
    }
  },
  created() {
    if (this.$store.state.headTitle.clientW > 1200) {
      this.Timeout = setTimeout(() => {
        this.deviceType = true;
      }, 200);
    } else {
      this.Timeout = setTimeout(() => {
        this.deviceType = false;
      }, 200);
    }
    if (!this.$store.state.headTitle.searchCate) {
      this.$store.commit("changeSearchCate", "1");
      this.searchCateValue = '1'
    }else{
        this.searchCateValue = this.$store.state.headTitle.searchCate
    }
  },
  mounted() {
    service_cate().then(res => {
      this.serviceCate = res.data.data.EN;
      this.$store.commit("changeFieldCate", res.data.data);
    });
    news_article_cate().then(res => {
      this.news_cate = res.data.data.EN;
      this.$store.commit("changeNewsCate", res.data.data);
    });
  },
  methods: {
    // 搜索框选中值改变
    searchChange(e) {
      this.$store.commit("changeSearchCate", e);
    },
    // 搜索框 获取焦点
    searchFocus() {
      this.$store.commit('changeifSearchFocus', true);
    },
    // 搜索框 失去焦点
    searchBlur() {
       this.$store.commit('changeifSearchFocus', false);
    },
    // 点击搜索  打开搜索输入框
    onSearch() {
      this.hiddenSearch = !this.hiddenSearch;
    },
    // 搜索 跳转页面
    searchFn(e) {
      if (this.searchInput) {
        if (this.$route.name != "en_search") {
          this.$router.push({ name: "en_search" });
        }
        this.$store.commit("changeSearchInput", this.searchInput);
      }
    },

    //语言选择框改变时间
    handleChange(value) {
      this.$store.commit("changeLang", value[0]);

      let name = this.$route.name;

      var linkPath;
      if (value[0] === "CHS") {
        // 中文
        linkPath = name.replace(/^(en_)|^(jap_)/g, "zh_");
      } else if (value[0] === "EN") {
        // 英文
        linkPath = name.replace(/^(en_)|^(jap_)/g, "en_");
      } else if (value[0] === "JAP") {
        //  日文
        linkPath = name.replace(/^(en_)|^(en_)/g, "jap_");
      }
      this.$router.push({ name: linkPath });
    },
    //禁止冒泡事件
    navlist() {
      return false;
    },
    onNavBtn() {
      if (this.deviceType) {
        window.document.documentElement.style.overflow = "auto";
        this.deviceType = false;
      } else {
        window.document.documentElement.style.overflow = "hidden";
        this.deviceType = true;
      }
    },
    onNavlink(link, query) {
      window.document.documentElement.style.overflow = "auto";
      if (this.$store.state.headTitle.equipment == "pc") {
        this.deviceType = true;
        if (link == "en_field") {
          this.$store.commit("changeFieldCurrentEN", query.cid);
        }
        if (link == "en_professional") {
          this.$store.commit("changeNewsCateCurrentEN", query.id);
        }
        if (link == "en_problem") {
          this.$store.commit("changeNewsCateCurrentEN", query.id);
        }
        try {
          this.$router.push({ name: link, query: query || {} });
        } catch (error) {
          console.log("已经在当前页面了");
        }

        return false;
      } else if (this.$store.state.headTitle.equipment == "mobile") {
        this.deviceType = false;
        try {
          this.$router.push({ name: link, query: query || {} });
        } catch (error) {
          console.log("已经当前页面了");
        }
      }
    }
  }
};
</script>
<style scoped src="./sass/naviber.css"></style>
<style scoped>
/* 动画 进入  */
.navlist-enter-active {
  animation: bounce-in 1s;
}
/* .navlist-leave-active {
  animation: bounce-in 1s  reverse;  
} */
/* 动画 进入 */
@keyframes bounce-in {
  0% {
    opacity: 0;
    /* height: 0; */
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    /* height: calc(100% - 0.88rem); */
    transform: scaleY(1);
  }
}
</style>
